<template>
  <div class="trans-record-detail bg-color">
    <van-empty description="未查询到数据" v-if="showEmpty" />
    <div v-if="orderInfo.dou_money !== ''">
      <div class="record-money">
        <p>转让金额(元)</p>
        <p>{{orderInfo.dou_money}}</p>
      </div>
      <div class="record-info">
        <van-cell-group class="trans-detail-cells" :border="false">
          <van-cell title="转让豆数量">
            <div Slots="value">
              <span style="font-family: DingMedium">{{orderInfo.dou_num}}</span>
            </div>
          </van-cell>
          <van-cell title="当前状态">
            <div Slots="value">
              <span
                :class="dataOption.record_states.filter(e =>{return e.value == orderInfo.record_state})[0].className"
              >{{dataOption.record_states.filter(e =>{return e.value == orderInfo.record_state})[0].name }}</span>
            </div>
          </van-cell>
          <van-cell title="交易类型" :value="orderInfo.record_name" />
          <van-cell title="申请转让时间" :value="orderInfo.record_date" />
          <van-cell title="订单号" value-class="large-cell-value" style="border:none;">
            <div Slots="value">
              <span style>{{orderInfo.record_no}}</span>
            </div>
          </van-cell>
        </van-cell-group>
      </div>
    </div>
  </div>
</template>

<script>
import { Cell, CellGroup, Toast, Empty } from "vant";
import { getTransRecordDetail } from "@/api/api";
export default {
  name: "transRecordDetail",
  components: {
    vanCell: Cell,
    vanCellGroup: CellGroup,
    vanEmpty: Empty,
  },
  data() {
    return {
      record_id: this.$route.query.record_id,
      showEmpty: false,
      orderInfo: {
        dou_money: "",
        dou_num: "",
        record_date: "",
        record_id: "",
        record_name: "",
        record_no: "",
        record_state: "",
      },
      dataOption: {
        record_states: [
          {
            name: "转让中",
            value: 1,
            className: "type1",
          },
          {
            name: "转让成功",
            value: 2,
            className: "type2",
          },
          {
            name: "转让失败",
            value: 3,
            className: "type3",
          },
        ],
      },
    };
  },
  created() {
    this.getOrderDetail();
  },
  methods: {
    getOrderDetail() {
      Toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });
      getTransRecordDetail({
        record_id: this.record_id,
      })
        .then((res) => {
          Toast.clear();
          if (res.code == 200000) {
            for (name in this.orderInfo) {
              if (res.data[name] !== undefined) {
                this.orderInfo[name] = res.data[name];
              }
            }
            this.showEmpty = false;
          } else {
            this.showEmpty = true;
            Toast(res.msg);
          }
        })
        .catch((err) => {
          Toast.clear();
        });
    },
  },
};
</script>

<style lang="less" scoped>
.trans-record-detail {
  min-height: 100%;
  overflow: hidden;
  .record-money {
    overflow: hidden;
    margin: 10px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 2px 24px 0px rgba(0, 0, 0, 0.04);
    border-radius: 10px;
    height: 110px;
    text-align: center;
    p:nth-child(1) {
      font-size: 16px;
      font-weight: 400;
      color: rgba(0, 0, 0, 1);
      line-height: 23px;
      margin-top: 25px;
    }
    p:nth-child(2) {
      font-size: 29px;
      margin-top: 7px;
      font-family: DingMedium;
      font-weight: 500;
      color: rgba(0, 0, 0, 1);
      line-height: 29px;
    }
  }
  .record-info {
    border-radius: 10px;
    margin: 10px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 2px 24px 0px rgba(0, 0, 0, 0.04);
    border-radius: 10px;
    padding-bottom: 16px;
    overflow: hidden;
  }
  .trans-detail-cells /deep/ .van-cell__title,
  .trans-detail-cells /deep/ .van-van-cell__value {
    font-size: 16px;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
  }

  span.type1 {
    color: #4197f5;
  }
  span.type2 {
    color: #5eb349;
  }
  span.type3 {
    color: #f85549;
  }

  .large-cell-value {
    flex: 3;
  }
}
</style>
